<template>
  <div class="content animate__animated animate__fadeIn">
    <div class="carousel-container">
      <a-carousel autoplay>
        <div><img src="./img/1a.jpg" alt="" /></div>
        <div><img src="./img/9a.jpg" alt="" /></div>
        <div><img src="./img/7a.jpg" alt="" /></div>
        <div><img src="./img/10a.jpg" alt="" /></div>
      </a-carousel>
    </div>
    <div class="adopt">
      <div class="adopt-left animate__animated animate__fadeInLeft">
        <div ref="ladyCat" class="ladyCat">
          <lottie-player
            src="/json/lady-cat.json"
            background="transparent"
            speed="1"
            style="width: 450px; height: 450px; margin: 0 auto"
            loop
            autoplay
          ></lottie-player>
        </div>
      </div>
      <div class="adopt-right">
        <h1 class="animate__animated animate__fadeInDown">领宠物回家！</h1>
        <p class="animate__animated animate__fadeInDown">
          在这个平台上面，你可以寻找到你喜爱的宠物，并将它带回家！带回家之后必须要好好善待它哦！
        </p>
        <button class="seek-pet-btn animate__animated animate__fadeInDown">
          <router-link
            to="/adopt"
            style="width: 100%; height: 100%; color: #ffffff"
            >去寻找它!</router-link
          >
        </button>
      </div>
    </div>
    <div class="fosterage">
      <div class="fosterage-left">
        <h1 class="animate__animated animate__fadeInDown">
          帮宠物寻找新主人！
        </h1>
        <p class="animate__animated animate__fadeInDown">
          在这里，如果你不再想继续去喂养你的宠物了，或者你救助了一只流浪动物，但自己没时间照顾它，你都可以将它发布到这个平台上面，为它寻找新的主人。
        </p>
        <button class="fosterage-pet-btn animate__animated animate__fadeInDown">
          <router-link
            to="/fosterage/publicFosterage"
            style="width: 100%; height: 100%; color: #ffffff"
          >
            找新主人!</router-link
          >
        </button>
      </div>
      <div class="fosterage-right animate__animated animate__fadeInRight">
        <div ref="slipper" class="slipper">
          <lottie-player
            src="/json/slipper.json"
            background="transparent"
            speed="1"
            style="width: 450px; height: 450px; margin: 0 auto"
            loop
            autoplay
          ></lottie-player>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Carousel } from "ant-design-vue";

export default {
  name: "Index",
  components: { ACarousel: Carousel },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped>
.content {
  width: 1440px;
  margin: 0 auto;
  margin-top: 5px;
}

.carousel-container {
  border-radius: 10px;
  overflow: hidden;
}

/* 走马灯样式 */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 500px;
  line-height: 500px;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide img {
  width: 100%;
  height: 100%;
}

/* 领养模块样式 */
.adopt {
  width: 1440px;
  height: 500px;
  margin: 5px auto 0 auto;
  display: flex;
  justify-content: space-between;
}

.adopt .adopt-left,
.adopt .adopt-right {
  width: 50%;
  height: 100%;
}

.adopt .adopt-left .ladyCat {
  width: 650px;
  height: 450px;
  margin: 25px 25px 0 0;
  float: right;
  border-radius: 10px;
  box-shadow: 0 0 15px;
  padding: 0px;
  background: #8b572a;
}

.adopt .adopt-right {
  padding: 100px 0 0 100px;
}

.adopt .adopt-right h1 {
  font-size: 50px;
  font-weight: 600;
}

.adopt .adopt-right p {
  font-size: 20px;
}

.seek-pet-btn {
  width: 100px;
  height: 40px;
  background-color: #5119b2;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 2px 0px rgb(111, 111, 111);
  color: aliceblue;
  font-size: 16px;
  font-weight: 600;
  transition: 0.5s;
}

.seek-pet-btn:hover {
  box-shadow: 0 5px 10px 0px rgb(111, 111, 111);
}

/* 寄养模块样式 */
.fosterage {
  width: 1440px;
  height: 500px;
  margin: 5px auto 0 auto;
  display: flex;
  justify-content: space-between;
}

.fosterage .fosterage-left,
.fosterage .fosterage-right {
  width: 50%;
  height: 100%;
}

.fosterage .fosterage-left {
  padding: 60px 0 0 100px;
}

.fosterage .fosterage-left h1 {
  font-size: 50px;
  font-weight: 600;
}

.fosterage .fosterage-left p {
  font-size: 20px;
}

.fosterage .fosterage-right .slipper {
  width: 650px;
  height: 450px;
  margin: 25px 0 0 50px;
  float: left;
  border-radius: 10px;
  box-shadow: 0 0 15px;
  padding: 0px;
  background: #5119b2;
}

.fosterage-pet-btn {
  width: 100px;
  height: 40px;
  background-color: #8b572a;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 2px 0px rgb(111, 111, 111);
  color: aliceblue;
  font-size: 16px;
  font-weight: 600;
  transition: 0.5s;
}

.fosterage-pet-btn:hover {
  box-shadow: 0 5px 10px 0px rgb(111, 111, 111);
}
</style>
